import React, { useEffect } from 'react';
import './index.less';
import './form.less';
import { Form, Row, Col } from 'antd';
import funcs from './funcs';
import RenderItem from './components/RenderItem';


export default class extends React.Component {
    constructor(props) {
        super(props);

        this.func = funcs(this);
    }

    render() {
        const {
            config,
            cols,
            formData,
            onChange,
            status = 'edit'
        } = this.props;

        const arr = this.func.exchangeArr(config, cols || 1);
        const colSpan = Math.floor(24 / cols);

        return (
            <div className={'common-custom-form private-form-class'}>
                <Form>
                    {arr.map((row, rowIndex) => {
                        return (
                            <Row
                                gutter={24}
                                key={`row_${rowIndex}`}
                            >
                                {
                                    Array.isArray(row) ?
                                        row.map((col, colIndex) => {
                                            return (
                                                <Col
                                                    key={`col_${colIndex}`}
                                                    span={col.span || colSpan}
                                                >
                                                    <RenderItem
                                                        config={col}
                                                        value={formData[col.key]}
                                                        onChange={this.func.changeForm}
                                                        status={status}
                                                    />
                                                </Col>
                                            );
                                        }) :
                                        <Col
                                            span={row.span || 24}
                                        >
                                            <RenderItem
                                                config={row}
                                                value={formData[row.key]}
                                                onChange={this.func.changeForm}
                                                status={status}
                                            />
                                        </Col>
                                }
                            </Row>
                        );
                    })}
                </Form>
            </div>
        );
    }
}